import { useState, useEffect } from 'react'
import Draggable from 'react-draggable'
import { CloseOutlined } from '@ant-design/icons'
import { Video } from '../../../../Common/Configure/Video'
import { WebTemplateUrl } from '../Template/configuration'

import { useBoolean } from 'ahooks'

const CommandDraBox = ({ item }) => {
    const [VideoState, { setTrue, setFalse }] = useBoolean(true)
    useEffect(() => {
        !item.children && console.log(item)
        setTrue()
    }, [setTrue, item])

    return (
        <>
            {!item.children && VideoState && (
                <Draggable handle=".drag-handler">
                    <div className="CommandDraBox">
                        <div className="Title drag-handler">
                            <img src={WebTemplateUrl + 'command01.png'} alt="" />
                            <div>{item.title}</div>
                            <CloseOutlined onClick={setFalse} />
                        </div>
                        <div className="Center">
                            {item.type === 3 ? <Video data={item} date={new Date().getTime()} /> : <div>通话状态</div>}
                        </div>
                    </div>
                </Draggable>
            )}
        </>
    )
}

export const CommandRight = ({ RightBox }) => {
    const [MonitorBoxList, setMonitorBoxList] = useState()
    RightBox.useSubscription(val => {
        // console.log(val)
        const { type, list } = val
        switch (type) {
            case 3:
                const data = list.map(v => ({ ...v, type: 3 }))
                setMonitorBoxList(data)
                break
            default:
                break
        }
    })
    return (
        <div className="CommandRight">
            {MonitorBoxList &&
                MonitorBoxList.length !== 0 &&
                MonitorBoxList.map(item => <CommandDraBox key={item.key} CloseEvent={CloseEvent} item={item} />)}
        </div>
    )
}
